<template>
  <div class="box">
    <div class="add">
      <el-button class="add_" type="primary" @click="add_">添加</el-button>
    </div>
    <!-- 表格开始 -->
    <el-table :data="baseData" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="90" />
      <el-table-column prop="name" label="退款原因" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-switch @change="swithCahnge" v-model="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button plain @click="modify_btn(scope.row.id)">编辑</el-button>
          <el-button plain @click="del_(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->

    <!-- 编辑弹出层开始 -->
    <el-dialog v-model="dialogFormVisible" title="编辑商品" @close="close_event">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="修改原因" prop="pass">
          <el-input
            v-model="ruleForm.pass"
            type="type"
            autocomplete="off"
            placeholder="请输入退货原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
          <el-button type="primary" @click="modify_confirm()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹出层结束 -->

    <!-- 添加弹出框开始 -->

    <el-dialog v-model="add_dialogFormVisible" title="添加">
      <el-form :model="addList">
        <el-form-item label="id：">
          <el-input v-model="addList.id" placeholder="输入id" />
        </el-form-item>
        <el-form-item label="退款原因：">
          <el-input v-model="addList.name" placeholder="退款原因" />
        </el-form-item>
        <el-form-item label="状态：">
          <el-input v-model="addList.status" placeholder="0 或者 1" />
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="addList.sort" placeholder="0 或者 1" />
        </el-form-item>
        <el-form-item label="添加时间：">
          <el-input disabled v-model="addList.createTime" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="AAA()">取消</el-button>
          <el-button type="primary" @click="BBB()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加弹出框结束 -->
  </div>
</template>
<script setup>
import { one, modify_post, del, add } from "./http/http";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
const baseData = reactive([]);
// 初次渲染页面
Initial_rendering();
function Initial_rendering() {
  baseData.length = 0;
  for (let i = 0; i <= 30; i++) {
    one(i).then((v) => {
      baseData.push(v.data.data.help);
    });
  }
}
//删除操作
const del_ = (i) => {
  del(i).then(() => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    Initial_rendering();
  });
};
const swithCahnge = () => {
  console.log(baseData[0].status);
};
const dialogFormVisible = ref(false);
const ruleForm = reactive({
  pass: "",
  id: "",
});
const rules = {
  pass: [{ required: true, trigger: "change", message: "该项不能为空" }],
};

const close_event = () => {
  ruleForm.pass = "";
};
//编辑按钮
const modify_btn = (i) => {
  dialogFormVisible.value = !dialogFormVisible.value;
  ruleForm.id = i;
};
//编辑确认按钮
const modify_confirm = () => {
  console.log(ruleForm.pass);
  if (!ruleForm.pass) {
    ElMessage.error("这个不能为空");
  } else {
    modify_post(ruleForm.id, ruleForm.pass).then(() => {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      dialogFormVisible.value = !dialogFormVisible.value;
      Initial_rendering();
    });
  }
};
// 添加部分
const add_dialogFormVisible = ref(false);
const add_ = () => {
  console.log("添加");
  add_dialogFormVisible.value = !add_dialogFormVisible.value;
};
const addList = reactive({
  createTime: new Date(),
  id: "",
  name: "",
  sort: "",
  status: "",
});
const AAA = () => {
  Object.assign(addList, {
    createTime: new Date(),
    id: "",
    name: "",
    sort: "",
    status: "",
  });
  add_dialogFormVisible.value = !add_dialogFormVisible.value;

  console.log(addList);
};
const BBB = () => {
  add(addList).then(() => {
    Initial_rendering();
  });
  Object.assign(addList, {
    createTime: new Date(),
    id: "",
    name: "",
    sort: "",
    status: "",
  });
  add_dialogFormVisible.value = !add_dialogFormVisible.value;
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
